JavaScript 设计模式之适配器模式

Author Avatar
Klein 8月 27, 2018

介绍

  • 旧接口格式和使用者不兼容
  • 中间加一个适配器转换接口

演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Adaptee {
    specificRequest() {
        return '德国标准插头'
    }
}
class Target {
    constructor() {
        this.adaptee = new Adaptee()
    }
    request() {
        let info = this.adaptee.specificRequest()
        return `${info} - 转换器 - 中国标准插头`
    }
}

// 测试
let target = new Target()
let res = target.request()
console.log(res);

场景

  • 封装旧接口

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // 自己封装的新的 ajax ,使用方法 如下：
    ajax({
        url: '/getDate',
        type: 'post',
        dataType: 'json',
        data: {
            id: '123'
        }
    })
    .done(function(){})

    // 但是因为历史原因，代码中全都是：
    // $.ajax({}) 

    // 解决方案：
    var $ = {
        ajax: function (options) {
            return ajax(options)
        }
    }

  • Vue computed

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
    <p>顺序：{{message}}</p>
    <p>逆序：{{reversedmessage}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
    var Vue = new Vue({
        el: '#app',
        data: {
            message: 'hello'
        },
        computed: {
            reversedmessage: function() {
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

设计原则验证

  • 将旧接口和使用者进行分离
  • 符合开放封闭原则